<template>
  <div class="customers-comprehen">
    <div class="search-content">
      <el-select v-model="searchObj.level" placeholder="请选择统计维度">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="searchObj.depart_id" placeholder="请选择组合名称">
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.depart_name"
          :value="item.depart_id"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="searchObj.month"
        type="month"
        placeholder="选择月份"
        value-format="yyyy-MM"
      ></el-date-picker>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="comprehen-content">
      <div class="lead-deal">
        <h2 class="lead-deal-top">线索成交数</h2>
        <div class="lead-deal-content">
          <div class="lead-deal-left" style="width: 70%">
            <div id="container" style="width: 100%;height:400px;"></div>
          </div>
          <div class="lead-deal-right">
            <h2 class="lead-deal-right-title">渠道线索排名</h2>
            <div class="lead-deal-right-content">
              <div class="deal-right" v-for="item in paiming" :key="item.source_id">
                <div class="deal-right-left">
                  <span>{{item.index}}</span>
                  <p>{{item.source_name}}</p>
                </div>
                <div class="deal-right-right">{{item.source_num}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">邀约客户数</div>
            <div id="container1" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">到店客户数</div>
            <div id="container2" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12" :gutter="20">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">客户意向度</div>
            <div id="container3" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">月度销漏斗图</div>
            <div id="container4" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <hr />
      <p class="attention">注: 以上数据统计结果是在您使用车家佳潜客系统基础上计算得出</p>
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts";
// 引入highcharts其他文件
import HighchartsMore from "highcharts/highcharts-more";
import exporting from "highcharts/modules/exporting";
import funnel from "highcharts/modules/funnel";
HighchartsMore(Highcharts);
exporting(Highcharts);
funnel(Highcharts);
export default {
  data() {
    return {
      options: [],
      value: "",
      value1: "",
      groupList: [],
      paiming: [],
      searchObj: {
        depart_id: "",
        level: "",
        month: ""
      }
    };
  },
  watch: {
    "searchObj.level"() {
      this.searchObj.depart_id = "";
      this.getGroup();
    }
  },
  async mounted() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var tMonth = myDate.getMonth();

    var m = tMonth + 1;
    if (m.toString().length == 1) {
      m = "0" + m;
    }
    this.searchObj.month = tYear + "-" + m;
    await this.getLevel();
    // await this.getGroup(); 重复执行了，因为在 watch 里会执行
    await this.getColumnDate();
  },
  methods: {
    // 搜索
    search() {
      this.getColumnDate();
    },
    // 重置
    reset() {
      //1、清空搜索的内容
      this.searchObj.level = this.options[0].value;
      this.searchObj.depart_id = "";
      this.searchObj.month = "";
      //2、获取内容列表
      this.getColumnDate();
    },

    getColumnDate() {
      return this.$http
        .post(
          "/admin/statistics/index.php?act=saleCustomerStatistics&op=customerStatistics",
          this.searchObj
        )
        .then(res => {
          // console.log(res);
          let one = res.data.one;
          this.paiming = res.data.two;
          let three = res.data.three;
          let four = res.data.four;
          let five = res.data.five;
          let six = res.data.six;

          var chart = Highcharts.chart("container", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            colors: ["#d4d4d4", "#32a8ee", "#1f62b1", "#7979dc", "#f29469"],
            exporting: {
              enabled: false
            },
            xAxis: {
              categories: one.month
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            plotOptions: {
              column: {
                borderWidth: 0
              }
            },
            series: one.data
          });

          var chart1 = Highcharts.chart("container1", {
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            xAxis: {
              categories: three.month
            },
            exporting: {
              enabled: false
            },
            colors: ["#4f8bc4", "#00d9cc"],
            series: three.data,
            responsive: {
              rules: [
                {
                  condition: {
                    maxWidth: 500
                  },
                  chartOptions: {
                    legend: {
                      layout: "horizontal",
                      align: "center",
                      verticalAlign: "bottom"
                    }
                  }
                }
              ]
            }
          });

          var chart2 = Highcharts.chart("container2", {
            chart: {
              type: "area"
            },
            credits: {
              //去掉水印
              enabled: false
            },
            title: {
              text: ""
            },
            colors: ["#4f8bc4", "#00d9cc"],
            subtitle: {
              text: ""
            },
            exporting: {
              enabled: false
            },
            xAxis: {
              categories: four.month
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            tooltip: {
              split: true
            },
            plotOptions: {
              area: {
                stacking: "normal",
                lineColor: "#666666",
                lineWidth: 1,
                marker: {
                  lineWidth: 1,
                  lineColor: "#666666"
                }
              }
            },
            series: four.data
          });

          let fiveX = [];
          let fiveData = [
            {
              name: "潜客",
              data: []
            },
            {
              name: "进店",
              data: []
            }
          ];
          five.map(value => {
            fiveX.push(value.levelSign);
            fiveData[0].data.push(Number(value.value[0]));
            fiveData[1].data.push(Number(value.value[1]));
          });
          var chart3 = Highcharts.chart("container3", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            xAxis: {
              categories: fiveX
            },
            exporting: {
              enabled: false
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            colors: ["#1f62b1", "#f29469"],
            plotOptions: {
              column: {
                borderWidth: 0
              }
            },
            series: fiveData
          });

          let sixData = [];
          let num = 0;
          six.map(value => {
            let arr = {};
            arr.name = value.label;
            arr.x = value.value;
            arr.y = 1;
            sixData.push(arr)
          });
          const sixSort = ['线索', '潜客', '进店', '订单', '交车']
          sixData.sort(function(a, b) {
            return sixSort.indexOf(a.name) - sixSort.indexOf(b.name)
          })
          sixData.map(value => {
            if (!value.x) {
              num++;
            }
          });

          // if (num < 5) {
          var chart4 = Highcharts.chart("container4", {
            chart: {
              type: "funnel",
              marginRight: 100,
              events: {
                // load: function() {
                //   var chart = this;
                //   Highcharts.each(chart.series[0].data, function(p, i) {
                //     p.dataLabel.attr({
                //       x: (chart.plotWidth - chart.plotLeft) / 2,
                //       "text-anchor": "middle"
                //     });
                //   });
                // },
                // redraw: function() {
                //   var chart = this;
                //   Highcharts.each(chart.series[0].data, function(p, i) {
                //     p.dataLabel.attr({
                //       x: (chart.plotWidth - chart.plotLeft) / 2,
                //       "text-anchor": "middle"
                //     });
                //   });
                // }
              }
            },
            title: {
              text: "",
              x: -50
            },
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            colors: ["#d4d4d4", "#1f62b1", "#f29469", "#7979dc", "#32a8ee"],
            tooltip: {
              pointFormat: "{series.name}: <b>{point.x}</b>"
            },
            plotOptions: {
              series: {
                dataLabels: {
                  connectorWidth: 0,
                  distance: 0,
                  enabled: true,
                  format: "<b>{point.name}</b> ({point.x:,.0f})",
                  color:
                    (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                    "black",
                  softConnector: true,
                  crop: false,
                  inside: true
                },
                showInLegend: true
                //-- Other available options
                // height: pixels or percent
                // width: pixels or percent
              }
            },
            legend: {
              layout: "vertical",
              align: "right",
              verticalAlign: "middle",
              y: 40,
              itemMarginBottom: 16,
              symbolWidth: 40,
              symbolHeight: 16,
              symbolRadius: 4,
              squareSymbol: false,
              itemStyle: {
                fontWeight: 'bold',
                paddingBottom: 20
              }
            },
            series: [
              {
                name: "用户",
                data: sixData,
                neckWidth: "0%",
                neckHeight: "0%"
              }
            ]
          });
          // }
        });
    },
    // 获取维度
    getLevel() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departLevels")
        .then(res => {
          this.options = res.data;
          this.searchObj.level = this.options[0].value;
        });
    },
    // 获取组合
    getGroup() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departListDown", {
          depart_level: this.searchObj.level
        })
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          } else {
            this.groupList = [];
          }
        });
    }
  }
};
</script>

<style scoped lang="scss">
.customers-comprehen {
  min-height: 100%;
  background-color: rgb(243, 243, 243);

  .comprehen-content {
    padding: 0 10px 10px;
   background-color: #f3f3f3;
  }
	.grid-content{
		box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
	}
  .lead-deal {
    height: 440px;
    background-color: #fff;
    margin-bottom: 20px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    .lead-deal-top {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: normal;
      text-indent: 20px;
      border-bottom: 1px solid rgb(233, 233, 233);
    }
    .lead-deal-content {
      display: flex;
      align-items: center;
      .lead-deal-right {
        margin-left: auto;
        margin-right: 20px;
        width: 424px;
        height: 360px;
        border: 1px solid rgb(233, 233, 233);
        .lead-deal-right-title {
          position: relative;
          color: #4c4949;
          height: 60px;
          line-height: 60px;
          text-indent: 70px;
          font-size: 18px;
          border-bottom: 1px solid rgb(233, 233, 233);
        }
        .lead-deal-right-title::before {
          position: absolute;
          content: "";
          width: 24px;
          height: 24px;
          background: url("../../../../assets/images/downd.png") no-repeat;
          top: 50%;
          left: 35px;
          transform: translateY(-50%);
        }
        .lead-deal-right-content {
          padding: 10px 50px 20px;
          .deal-right {
            display: flex;
            justify-content: space-between;
            color: rgb(181, 190, 200);
            margin-bottom: 10px;
            font-size: 12px;
            .deal-right-left {
              display: flex;
              align-items: center;
              span {
                margin-right: 30px;
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
              }
            }
            &:nth-of-type(-n + 3) span {
              background-color: rgb(124, 181, 236);
              border-radius: 50%;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
.el-main {
   
   background-color: rgb(243, 243, 243);
}
  .data-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: normal;
    text-indent: 20px;
    border-bottom: 1px solid rgb(233, 233, 233);
  }

  .grid-data {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .attention {
    text-align: center;
    color: #7b7979;
  }
}
</style>
<style>
.highcharts-legend-item rect {
  y: 3
}
</style>